<template>
<!-- 头部组件 -->
<header>
  <div class="head">
    <div class="userName">
      <div>{{$store.state.name+"的家"}}</div>
      <span class="iconfont icon-gengduo"></span>
    </div>
  </div>
  <swiper :show-dots="true" :dots-position="'center'" :height="'125px'">
    <swiper-item>
      <div class="swiper-container">
        <div class="weather">
          <div class="wendu">
            <span class="number">{{now.temperature}}</span>
            <span class="icon">℃</span>
          </div>
          <div class="area">
            <p class="address">{{address}}</p>
            <p class="tianqi">{{now.text}}</p>
          </div>
        </div>
        <div class="details">
          <div class="details-container">
            <p>
              <span class="name">室外空气</span>
              <span class="value">重度污染</span>
            </p>
            <p>|</p>
            <p>
              <span class="name">水质</span>
              <span class="value">不可直饮</span>
            </p>
            <p>|</p>
            <p>
              <span class="name">湿度</span>
              <span class="value">潮湿</span>
            </p>
          </div>
        </div>
      </div>
    </swiper-item>
    <swiper-item>
      <div class="swiper-container1">
        <div class="container-box">
          <div class="photoFont" @click="changeStatus">
            <img v-bind:src=" nowStatus ? openEye : colseEye " alt="">
          </div>
          <p>{{ nowStatus ? "开启布防" : "取消布防" }}</p>
        </div>
      </div>
    </swiper-item>
  </swiper>
</header>
</template>
<script>
import "../iconfont/iconfont.css";
import {
  Swiper,
  SwiperItem,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Swiper,
    SwiperItem,
    Confirm
  },
  data: function() {
    return {
      now: {},
      address: "",
      nowStatus: false, // 布防状态 从获取设备信息的接口中 取
      openEye: require('@/assets/openEye.png'),
      colseEye: require('@/assets/closeEye.png')
    };
  },
  mounted: function() {
    //获取天气情况 H5 weixin loaction  比心天气
    var time = Math.floor((new Date()).getTime() / 1000);
    var uid = "UB7FFFF7B7";
    var ttl = "3000";
    var str = "ts=" + time + "&ttl=" + ttl + "&uid=" + uid;
    var result = this.$CryptoJS.HmacSHA1(str, "zbrwb6yqoisunrzt");
    var sig = result.toString(this.$CryptoJS.enc.Base64);
    str = str + "&sig=" + sig;
    var API = "http://api.seniverse.com/v3/weather/now.json?location=ip&";
    var url = API + str;
    var that = this;
    this.$Jsonp(url, null, function(err, data) {
      if (err) {
        console.error(err.message);
      } else {
        console.log(data.results[0]);
        that.now = data.results[0].now;
        that.address = data.results[0].location.name;
      }
    })
    this.getDangerStatus();
  },
  methods: {
    getDangerStatus() {
      this.$http.get("http://iot.malanco.com/myDevice", {
          headers: {
            contentType: "application/json; charset=utf-8"
          },
          responseType: "json"
        })
        .then(response => {
          if (response.data.success == "true") {
            var device = response.data.data;
            if (device != null) {
              if (device.defenseStatus != null && device.defenseStatus == 1) {
                // 布防状态 开启
                this.nowStatus = true;
              } else {
                // 布防状态 关闭
                this.nowStatus = false;
              }
            }
          }
        });
    },
    changeStatus() {
      console.log("changeStatus");
      var defenseStatus;
      if (this.nowStatus) {
        defenseStatus = 0;
      } else {
        defenseStatus = 1;
      }
      // this.nowStatus = !this.nowStatus;
      this.$http.post("http://iot.malanco.com/changeDefenseStatus", {
        defenseStatus: defenseStatus
      }).then(response => {
        if (response.data.success == "true") {
          if (this.nowStatus) {
            this.$vux.alert.show({
              title: "",
              content: "取消布防成功"
            })
            this.nowStatus = !this.nowStatus;
            this.$store.dispatch('changeDefenseStatus', this.nowStatus);
          } else {
            this.$vux.alert.show({
              title: "",
              content: "开启布防成功"
            })
            this.nowStatus = !this.nowStatus;
            this.$store.dispatch('changeDefenseStatus', this.nowStatus);
          }
        }
      }, response => {
        var message = response.response.data.exceptionObj.message;
        this.$vux.toast.show({
          type: "warn",
          text: message
        })
      })
    }
  }
};
</script>

<style lang="less">
// @import "../iconfont/iconfont.css";
header {
    color: #fff;
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 40px;
        .userName {
            display: flex;
            align-items: center;
            > div {
                padding-bottom: 4px;
                padding-right: 10px;
            }
        }
        .iconfont {
            font-size: 20px;
        }
        .add {
            .iconfont {
                font-weight: bold;
            }
        }
    }
    .weather {
        height: 60px;
        display: flex;
        margin-top: -5px;
        .wendu {
            padding: 0 20px;
            .number {
                font-size: 45px;
            }
        }
        .area {
            padding-top: 15px;
            font-size: 14px;
        }
    }
    .details {
        display: flex;
        margin-top: 15px;
        .details-container {
            // margin: 0px auto;
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 0 10px;
            // overflow: hidden;
            p {
                // border-right: 1px solid #fff;
                // padding: 0px 14px;
                font-size: 12px;
                text-align: center;
                float: left;
            }
            p:last-child {
                border: none;
            }
        }
    }
    .swiper-container1 {
        position: relative;
        height: 100%;
        .container-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-40%,-67%);
            .photoFont {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #ffffff;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                font-size: 12px;
            }

            .container-item:first-child {
                margin-right: 76px;
            }
        }
    }
    .vux-slider .vux-indicator-right > a > .vux-icon-dot,
    .vux-slider > .vux-indicator > a > .vux-icon-dot {
        background: #d0cdd1;
    }
    .vux-slider .vux-indicator-right > a > .vux-icon-dot.active,
    .vux-slider > .vux-indicator > a > .vux-icon-dot.active {
        background: #ffffff;
    }
}
</style>
